<template>
  <div class="sgh-upload">
    <Upload
      paste
      multiple
      type="drag"
      action="http://127.0.0.1:7001/home/uploadImage"
      :on-success="uploadSuccess"
    >
      <div style="padding: 20px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>Click or drag files here to upload</p>
      </div>
    </Upload>
    <section class="main">
      <ul>
        <li v-for="(item, i) in img_lis" :key="i">
          <img :src="item" alt="" />
          <div class="del-shadow">
            <Button type="error" @click="del(item)">DELETE</Button>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
import { getInit,delImage } from "@/service/home";

export default {
  data() {
    return {
      img_lis: [],
    };
  },
  methods: {
    uploadSuccess(response) {
      try {
        this.img_lis = response.img_lis;
      } catch (error) {
        console.error(error);
      }
    },
    async init() {
      let res = await getInit.call(this);
      this.img_lis = res.img_lis;
    },
    async del(src){
      let code = await delImage.bind(this)(src.split('/')[5]);
      if(code == 200){
        let index = this.img_lis.indexOf(src);
        this.img_lis.splice(index,1);
      }else{
        this.$Message[error]({
          background: true,
          content: '删除失败'
        });
      }
    }
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss">
.sgh-upload {
  .main {
    ul {
      list-style: none;
      li {
        display: inline-block;
        width: 50%;
        position: relative;
        padding: 10px;
        img {
          width: 100%;
        }
        .del-shadow {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 99;
          background-color: rgba(#000, 0.5);
          visibility: hidden;
          opacity: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all .5s;
          &:hover .ivu-btn{
            opacity: 1;
          }
          .ivu-btn{
            height: 20%;
            width: 50%;
            opacity: 0;
            transition: opacity .5s .2s;
          }
        }
        &:hover .del-shadow {
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }
}
</style>
